<template>
    <div>
        <dv-border-box-11 title="实时天气预告" style="width: 30vw; height: 24vh;">
            <div class="content">
                <div class="title">
                    <dv-decoration-3 class="decoration1"/>
                    <h6 style="margin: 0;font-size: 16px;text-align: center;color: white">蔬菜基地降水量</h6>
                    <dv-decoration-3 class="decoration1"/>
                </div>
                <div class="chart-container">
                    <div class="temper-statistic" id="chart3">
                    </div>
                </div>
            </div>
        </dv-border-box-11>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from "echarts";

function getVirtualData(year: string) {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse(+year + 1 + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data: [string, number][] = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 10000)
    ]);
  }
  return data;
}

const option = ref({
  tooltip: {},
  visualMap: {
    min: 0,
    max: 10000,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 5,
    textStyle: {
      color: 'white' // 设置标签颜色为白色
    }
  },
  calendar: {
    top: 55,
    left: 30,
    right: 30,
    cellSize: ['auto', 10],
    range: '2025',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: false},
    monthLabel: {
      show: true,
      color: 'white'
    },
    dayLabel: {
      show: true,
      color: 'white'
    }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtualData('2025'),
  }
});

onMounted(() => {
    const chartDom = document.getElementById('chart3');
    let myChart;
    if (chartDom) {
        myChart = echarts.init(chartDom);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option.value);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
});

</script>

<style scoped>
.content{
    width: 30vw;
    height: 24vh;
    padding-top: 6vh;
}
.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.decoration1 {
    width: 8vw;
    height: 2vh;
}
.chart-container{
    width: 30vw;
    height: 20vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.temper-statistic{
    width: 28vw;
    height: 20vh;
}
</style>